<template lang="pug">
div(ref="lottie_box")
</template>

<script setup>
import lottie from "lottie-web";
import {onBeforeUnmount, onMounted, ref} from "vue";

const props = defineProps({
  src: {
    type: Object,
    default: () => {
    },
  },
  path: {
    type: String,
    default: "",
  },
  loop: {
    type: Boolean,
    default: false,
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
});
const lottie_box = ref(null);
let animation = ref(null);
onMounted(() => {
  if (lottie_box.value) {
    animation.value = lottie.loadAnimation({
      container: lottie_box.value,
      renderer: "svg", // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
      loop: props.loop, // 循环播放，默认：true
      autoplay: props.autoplay, // 自动播放 ，默认true
      // path: props.path,//网络路径
      animationData: Object.keys(props.src).length == 0 ? "" : props.src,//本地路径，优先级更高
    });
  }
});

onBeforeUnmount(() => {
  animation.value.destroy();
});

</script>

<style scoped>

</style>